<!-- 模块说明 -->
<template>
  <div>
    <!-- 头像 -->
    <div class="top">
      <div class="topson">
        <img class="imgone"
          src="https://img1.baidu.com/it/u=3584650156,1617942434&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
        <p>cookies</p>
        <h5>普通用户&ensp;<b class="bai">></b></h5>
        <h5>账户设置&ensp;<b class="bai">></b></h5>

      </div>
      <p class="switch">
        <van-icon name="friends-o" size="30" color="red" />
        <br>
        切换用户
      </p>
      <div class="four">

        <ul>
          <li>0</li>
          <li>优惠券</li>
        </ul>
        <ul>
          <li>0</li>
          <li>收藏</li>
        </ul>
        <ul>
          <li>0</li>
          <li>积分</li>
        </ul>
        <ul>
          <li>0.00</li>
          <li>余额</li>
        </ul>
      </div>
    </div>
    <!-- 我得订单 -->

    <div class="list">
      <div class="mylist">
        <h4>我的订单</h4>
        <p>查看全部&ensp;<b>></b></p>
      </div>
      <div class="five">
        <ul>
          <van-icon name="balance-pay" size="30" color="#beb6b6" />
          <li>待付款</li>
        </ul>
        <ul>
          <van-icon name="logistics" size="30" color="#beb6b6" />
          <li>待发货</li>
        </ul>
        <ul>
          <van-icon name="send-gift-o" size="30" color="#beb6b6" />
          <li>待收货</li>
        </ul>
        <ul>
          <van-icon name="passed" size="30" color="#beb6b6" />
          <li>已完成</li>
        </ul>
        <ul>
          <van-icon name="service-o" size="30" color="#beb6b6" />
          <li>售后</li>
        </ul>
      </div>
    </div>
    <!-- 走马灯 -->
    <div class="lantern">
      <van-notice-bar left-icon="volume-o" text="---为保障您的合法权益，请您通过平台担保交易，切勿脱离平台擅自汇款，以免伤到受骗！" color="#cc0000"
        background="#fff" />
    </div>
    <!-- 更多功能 -->
    <div class="more">
      <h4>更多功能</h4>
      <div class="father">
        <ul>
          <van-icon name="brush-o" size="30" color="#4ac4dc" />
          <li>清除缓存</li>
        </ul>
        <ul>
          <van-icon name="friends-o" size="30" color="#f5a5ca" />
          <li>我的拼团</li>
        </ul>
        <ul>
          <van-icon name="like-o" size="30" color="#eab265" />
          <li>我的收藏</li>
        </ul>
        <ul>
          <van-icon name="todo-list-o" size="30" color="#76c8e0" />
          <li>浏览记录</li>
        </ul>
        <ul>
          <van-icon name="shopping-cart-o" size="30" color="#f8b253" />
          <li>购物车</li>
        </ul>
        <ul>
          <van-icon name="gold-coin-o" size="30" color="#e29058" />
          <li>我的优惠券</li>
        </ul>
        <ul>
          <van-icon name="chat-o" size="30" color="#25b476" />
          <li>联系我们</li>
        </ul>
        <ul>
          <van-icon name="smile-comment-o" size="30" color="#8eceda" />
          <li>我的发帖</li>
        </ul>
        <ul>
          <van-icon name="qr" size="30" color="#6ce3bb" />
          <li>APP扫码</li>
        </ul>
        <ul>
          <van-icon name="location-o" size="30" color="#94c8dd" />
          <li>收货地址</li>
        </ul>
        <ul>
          <van-icon name="gem-o" size="30" color="#efc9c8" />
          <li>我的店铺</li>
        </ul>
        <ul></ul>
      </div>
    </div>
    <!-- 协议------------- -->
    <div class="agree">
      <a href="">《用户服务协议》&emsp;&emsp;《隐私协议》</a>
    </div>
  </div>
</template>

<script setup>
</script>
<style lang="scss" scoped>
// 顶部----------------------------------------------------
.top {
  width: 100%;
  height: 180px;
  background: url(https://img1.baidu.com/it/u=2951764690,3302879749&fm=253&fmt=auto&app=138&f=JPEG?w=584&h=320) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}

// 头像
.topson {
  width: 260px;
  height: 80px;
  position: relative;
  margin-top: 20px;
  margin-left: 20px;
  float: left;

  >img {
    width: 80px;
    height: 80px;
    border: 1px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
  }

  >p {
    font-weight: 100;
    display: block;
    margin: 10px 90px;
    color: #fff;
  }

  h5 {
    float: left;
    font-weight: 100;
    margin-left: 90px;
    width: 80px;
    font-size: 14px;
    color: rgb(205, 130, 76);
    border-radius: 10px;
    text-indent: 4px;
    background: rgba($color: #beb6b6, $alpha: .3);

  }

  h5:last-of-type {
    font-weight: 100;
    margin-left: 4px;
  }


}

// 普通用户>
.bai {
  color: #fff;
}

// 切换用户
.switch {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background: rgba($color: #fff, $alpha: .3);
  float: right;
  font-size: 8px;
  text-align: center;
  margin-top: 20px;
  margin-right: 15px;

}

// 优惠券收藏积分余额
.four {
  width: 90%;
  height: 50px;
  // margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 20px;
  flex-direction: row;
  align-items: center;

  >ul {
    // align-items: center;
    text-align: center;
    color: #fff;
  }
}

// 我的订单---------------------------------
.list {
  width: 90%;
  height: 100px;
  background-color: #fff;
  margin: auto;
  border-radius: 10px;
  margin-top: -15px;
  overflow: hidden;
}

.mylist {
  width: 90%;
  height: 20px;
  margin: auto;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;

  >p>b {
    color: #beb6b6;
  }
}

.five {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  color: #545252;

  >ul {
    text-align: center;

    >li {
      margin-top: 6px;
    }
  }

}

// 走马灯---------------------
.lantern {
  width: 90%;
  margin: auto;
  margin-top: 12px;
  margin-bottom: 20px;
}

// 更多功能---------------------------------
.more {
  width: 90%;
  background-color: #fff;
  height: auto;
  margin: auto;
  overflow: hidden;

  >h4 {
    margin: 10px 16px;
  }
}

.father {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #636363;

  >ul {
    // background-color: beige;
    width: 25%;
    text-align: center;
    margin: 8px 0;

    >li {
      margin-top: 8px;
    }
  }
}

// 协议----------------------
.agree {
  width: 90%;
  height: 50px;
  margin: auto;
  text-align: center;
  line-height: 50px;
}
</style>
